<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车页面</title>
    <link rel="stylesheet" type="text/css" href="common.css">
    <style type="text/css">
        h1 {
            background-color: #f0f0f0;
            padding: 1rem;
            text-align: center;
        }
        /* 商品列表区域 */
        #cart-items {
            margin-bottom: 2rem;
        }
        .item-list {
            list-style-type: none;
            padding: 0;
        }
        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #ddd;
            padding: 1rem;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .item:hover {
            background-color: rgba(255, 130, 28, 0.22);
        }
        .item .item-content-wrap {
            display: flex;
        }
        .item img {
            width: 60px;
            height: auto;
            margin-right: 1rem;
        }
        .item h3 {
            margin: 0;
        }
        /* 数量输入框样式 */
        .item input[type="number"] {
            width: 50px;
            text-align: left;
        }
        /* 删除按钮样式 */
        .item .remove-btn {
            background-color: #c00;
            color: #fff;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            outline: none;
            transition: background-color 0.2s;
        }
        .item .remove-btn:hover {
            background-color: #a00;
        }

        #cart-summary {
            border-top: 1px solid #ddd;
            padding-top: 1rem;
            text-align: right;
        }
        #total-price {
            font-weight: bold;
            color: #FF5F1C;
        }

        #checkout-btn, #back-btn {
            display: block;
            width: 100%;
            max-width: 200px;
            margin: 2rem auto 0;
            padding: 0.75rem 1.5rem;
            font-size: 1.2rem;
            background-color: #FF5F1C;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            transition: background-color 0.2s;
        }
        #back-btn {
            background-color: #007bff;
        }
        #checkout-btn:hover {
            background-color: #FF461CFF;
        }
        #back-btn:hover {
            background-color: #0069d9;
        }
    </style>
    <script type="text/javascript">
        function backHome() {
            window.location.href = "./index.html";
        }
        function confirmOrder() {
            if (window.confirm("确认支付?")) {
                alert("支付成功");
                localStorage.removeItem("cartList");
                backHome();
            } else {
                alert("支付失败");
            }
        }
        function initCartList() {
            let cartList = JSON.parse(localStorage.getItem("cartList") || "[]");
            let totalPrice = 0;
            if (cartList.length > 0) {
                let itemTemplate = document.getElementById("item-template");
                let itemList = document.getElementsByClassName("item-list")[0];
                for (let i = 0; i < cartList.length; i++) {
                    let itemElement = itemTemplate.content.cloneNode(true);
                    itemList.appendChild(itemElement);

                    let item = cartList[i];
                    itemList.getElementsByTagName("li")[i].getElementsByTagName("img")[0].src = item.mainImg;
                    itemList.getElementsByTagName("li")[i].getElementsByTagName("h3")[0].innerText = item.title;
                    itemList.getElementsByTagName("li")[i].getElementsByClassName("price")[0].innerText = item.price;
                    itemList.getElementsByTagName("li")[i].getElementsByTagName("input")[0].value = item.count;
                    totalPrice += item.price * item.count;
                }
            } else {
                let blankTemplate = document.getElementById("blank-template");
                let itemList = document.getElementsByClassName("item-list")[0];
                let blankElement = blankTemplate.content.cloneNode(true);
                itemList.appendChild(blankElement);
            }
            document.getElementById("total-price").innerText = totalPrice + "";
        }
        function reloadCartList(event) {
            let curTarget = event.currentTarget;
            let title = curTarget.parentNode.getElementsByTagName("h3")[0].innerText;

            let cartList = JSON.parse(localStorage.getItem("cartList") || "[]");
            if (cartList.length > 0) {
                if (event.type === "change") {
                    cartList.filter(item => item.title === title)[0].count = parseInt(curTarget.value);
                } else if (event.type === "click") {
                    let idx = cartList.findIndex(item => item.title === title);
                    cartList.splice(idx, 1);
                }
                localStorage.setItem("cartList", JSON.stringify(cartList));
                window.location.reload();
            }
        }
        window.onload = function () {
            initCartList();
        }
    </script>
</head>
<body>
<h1>我的购物车</h1>
<div id="cart-main">
    <div id="cart-items">
        <h2>商品列表</h2>
        <ul class="item-list">
        </ul>
    </div>

    <div id="cart-summary">
        <h2>购物车小计</h2>
        <p>商品总价：￥<span id="total-price">XXX</span></p>
    </div>

    <div id="checkout-section">
        <button id="checkout-btn" onclick="confirmOrder()">确认支付</button>
        <button id="back-btn" onclick="backHome()">返回首页</button>
    </div>
</div>

<template id="item-template">
    <li class="item">
        <div class="item-content-wrap">
            <img src="" alt="商品描述">
            <div>
                <h3></h3>
                <p>价格：￥<span class="price"></span></p>
                <label for="quantity">数量：</label>
                <input type="number" id="quantity" min="1" value="1" onchange="reloadCartList(event)">
            </div>
        </div>
        <button class="remove-btn" onclick="reloadCartList(event)">删除</button>
    </li>
</template>

<template id="blank-template">
    <li class="item" style="display: flex; justify-content: center; font-weight: bold;">
        暂无商品
    </li>
</template>
</body>
</html>
